<template>
    <div :style="{height: height+'px',zIndex:zIndex}">
        <div style="position:fixed;z-index:5;visibility:hidden"></div>
        <section :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}" class="repair-fix">
            <slot>
                <div>sticky</div>
            </slot>
        </section>
    </div>
</template>

<script>
  export default {
    name: 'sticky',
    props: {
        stickyTop: {
            type: Number,
            default: 0
        },
        zIndex: {
            type: Number,
            default: 1000
        },
        className: {
            type: String
        }
    },
    data () {
      return {
        active: false,
        position: '',
        currentTop: '',
        width: undefined,
        height: undefined,
        child: null,
        stickyHeight: 0,
      }
    },
    methods: {
        sticky() {
            if(this.active){
                return
            }
            this.position = 'fixed'
            this.active = true
            this.width = this.width + 'px'
        },
        reset() {
            if(!this.active){
                return
            }
            this.position = ''
            this.width = 'auto'
            this.active = false
        },
        handleScroll() {
            this.width = this.$el.getBoundingClientRect().width
            const offsetTop = this.$el.getBoundingClientRect().top
            if(offsetTop <= this.stickyTop){
                this.sticky()
                return
            }
            this.reset()
        }
    },
    mounted(){
        this.height = this.$el.getBoundingClientRect().height
        window.addEventListener('scroll', this.handleScroll)
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style lang="less" scoped>
    .repair-fix{
        -webkit-transform: translateZ(0);
    }
</style>
